// src/APP.vue

<template>
<div id="style-example">
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style内联样式第一种：直接内联</div>
  <div :style="styleObject2">style内联样式第二种: 对象语法</div>
  <div :style="styleObject">style内联样式第三种：结合计算属性使用</div>
</div>
</template>

<script lang="ts">
import {  computed, defineComponent, reactive } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const styleObject1 = reactive({
      activeColor: 'red',
      fontSize: 30
    })

    const styleObject2 = reactive({
      color: 'red',
      fontSize: '13px'
    })

    const styleObject3 = reactive({
      color: 'yellow',
      fontSize: '16px'
    })

    const styleObject = computed(() => {
      return {
        color: styleObject3.color,
			  'font-size':styleObject3.fontSize  //CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
      }
    })

    return {
      ...styleObject1,
      styleObject2,
      styleObject
    }
  }
})
</script>